<template>
	<view>
		<u-navbar :border-bottom="false" title="注册门店" :title-size="36" :title-bold="true" :title-color="textColor">
			<view v-if="showNext" slot="right" class="u-m-r-35" @click="modalShow = true">
				<text class="text-bold u-font-28">跳过</text>
			</view>
		</u-navbar>
		<u-form class="form" :model="form" ref="registerMdForm" :error-type="['toast']">
			<u-form-item label-position="top" label="门店名称" :label-style="labelStyle" prop="name" required>
				<u-input v-model="form.name" placeholder="请输入门店名称" />
			</u-form-item>
			<u-form-item label-position="top" label="营业执照" prop="businessLicenseResourceId" :label-style="labelStyle"
				required>
				<u-input placeholder="点击上传识别" :disabled="true" />
				<u-upload ref="avatarUploadRef" slot="right" :action="baseUrl + 'api/Resource/UploadToOss'"
					:file-list="fileList" :header="headerToken" :max-count="1" name="image" :deletable="true"
					:show-progress="false" @on-success="onSuccess" @on-remove="onRemove" width="160" height="160">
				</u-upload>
			</u-form-item>
			<u-form-item label-position="top" label="所属地区" :label-style="labelStyle" prop="regionId" required
				right-icon="forward">
				<u-input type="select" :select-open="pickerShow" v-model="region" placeholder="省/市/区（县）"
					@click="pickerShow = true" />
			</u-form-item>
			<u-form-item label-position="top" label="经营地址" :label-style="labelStyle" prop="address" required>
				<u-input v-model="form.address" placeholder="请输入经营地址" />
				<image src="/static/home/dingwei.png" style="width: 30rpx;height:36rpx;" mode=""
					@click="chooseLocation"></image>
			</u-form-item>
			<u-form-item label-position="top" label="管理员姓名" :label-style="labelStyle" required>
				<u-input :value="storeUser.nickname" placeholder="请输入管理员姓名" disabled />
			</u-form-item>
			<u-form-item label-position="top" label="门店类型" :label-style="labelStyle" prop="shopType" required
				right-icon="forward">
				<u-input type="select" :select-open="typeShow" v-model="shopTypeName" placeholder="请选择门店类型"
					@click="typeShow = true" />
			</u-form-item>
		</u-form>
		<set-submit-bt text="提交审核" @click="handleSubmit" />
		<!-- 门店类型 -->
		<u-select mode="single-column" v-model="typeShow" :list="shopType" @confirm="chooseType">
		</u-select>
		<!-- 地区选择 -->
		<u-picker mode="region" v-model="pickerShow" :confirm-color="themeColor" @confirm="regionConfirm"></u-picker>
		<!-- modal框 -->
		<u-modal v-model="modalShow" title="您确定跳过注册门店？" :title-style="{fontWeight: 'bold'}"
			:content-style="contentStyle" :show-cancel-button="true" :confirm-color="themeColor" confirm-text="是"
			cancel-text="否" @confirm="$mRouter.switchTab({ route: '/pages/mine/index'})">
			<view class="slot-content">
				<rich-text :nodes="modalContent"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import SetSubmitBt from '@/components/set-submit-bt/index.vue';
	import { useShopStore } from '@/store/shop.js';
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	export default {
		components: {
			SetSubmitBt
		},
		data() {
			return {
				typeShow: false,
				modalShow: false,
				showNext: false,
				submitStyle: {
					height: '100rpx',
					color: '#FFFFFF',
					background: this.linearGradient
				},
				modalContent: `
					开店后您可以以批发价进货哦~<br>
					您也可以在“我”的“设置”中注册门店
				`,
				contentStyle: {
					color: this.greyColor,
					textAlign: 'center',
					lineHeight: '50rpx',
					fontSize: '22rpx',
					padding: '15rpx 0'
				},
				labelStyle: {
					fontSize: '30rpx',
					fontWeight: 'bold'
				},
		
				fileList: [],
				shopTypeName: '',
				region: '',
				form: {
					name: '',
					businessLicenseResourceId: '',
					regionId: 0,
					address: '',
					shopType: 0,
					shopLevelId: ''
				},
				rules: {
					name: [{
						required: true,
						message: '店铺名称不能为空',
						trigger: 'blur'
					}],
					businessLicenseResourceId: [{
						required: true,
						message: '营业执照必须上传',
						trigger: 'blur'
					}],
					regionId: [{
						required: true,
						message: '归属地区必须选择',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '经营地址不能为空',
						trigger: 'blur'
					}],
					shopType: [{
						required: true,
						message: '店铺类型必须选择',
						trigger: 'blur'
					}]
				},
				pickerShow: false
			}
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop',shopType:'shopType'}),
			...mapState(useUserStore, {storeUser: 'user',headerToken:'headerToken'})
		},
		onLoad() {
			var pages = getCurrentPages(); //当前页
			var beforePage = pages[pages.length - 2].route; //上个页面
			// 如果是第一次注册进来 显示跳过按钮
			if (beforePage == 'pages/wo/profile') {
				this.showNext = true
			}
			this.form.managerId = this.storeUser.id
			// 获取店铺等级
			this.getShopLevel()
		},
		onReady() {
			this.$refs.registerMdForm.setRules(this.rules)
		},
		methods: {
			// 图片上传成功触发
			onSuccess(data) {
				this.form.businessLicenseResourceId = data.data[0].id
			},
			// 图片移除时触发
			onRemove() {
				this.form.businessLicenseResourceId = ''
			},
			// 选择门店类型
			chooseType(e) {
				this.shopTypeName = e[0].label
				this.form.shopType = e[0].value.toString()
			},
			// 选择地区回调
			regionConfirm(e) {
				// console.log(e)
				this.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
				this.form.regionId = e.area.value;
			},
			// 定位
			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						this.form.address = res.address
					}
				});
			},
			// 获取店铺等级
			async getShopLevel() {
				const res = await this.$http.get('api/Shop/GetAllShopLevels')
				const arr = res.find(item => {
					return item.name == '门店'
				})
				this.form.shopLevelId = arr.id
			},
			handleSubmit() {
				this.$refs.registerMdForm.validate(async (valid) => {
					if (!valid) return;
					const res = await this.$http.post('api/Shop/Enter', this.form)
					if (!res) {
						this.$u.toast('注册成功', 1000, 'success')
						this.$mHelper.delayedJump('/pages/mine/index', 'switchTab')
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.container {
		// padding: 0 70rpx;
	}

	.form {
		padding: 0 70rpx;
	}
</style>
